<template>
  <div class="app-container">
    <div class="h-2 w-100 d-flex">
      <!--  -->
      <div class="h-100 w-5 d-flex justify-content-between">
        <!-- 东区总开1 -->
        <div class="h-100 width-33 p10">
          <div class="h-100 item_border p10">
            <div class="item_title">
              <div class="d-flex align-items-center">
                <div class="success_point"></div>
                <div class="font-white font-14">东区总开1</div>
              </div>
            </div>
            <div class="d-flex flex-column justify-content-between item_content">
              <div class="h-100 pt-3">
                <div class="h-100 w-100 d-flex align-items-center item_bg_border">
                  <div class="h-100 item_width" :class="titleBgcList[0]"></div>
                  <div class="h-100 item_width2 d-flex-center pl-2">
                    <div class="font-white-impact font-44 mr-2">{{$formatNumber(oneCarData1)}}</div>
                    <div class="font-blue font-16 mt-3">kW</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 东区总开2 -->
        <div class="h-100 width-33 p10">
          <div class="h-100 item_border p10">
            <div class="item_title">
              <div class="d-flex align-items-center">
                <div class="success_point"></div>
                <div class="font-white font-14">东区总开2</div>
              </div>
            </div>
            <div class="d-flex flex-column justify-content-between item_content">
              <div class="height-33 pt-3" v-for="(item,index) in oneCarData2" :key="index">
                <div class="h-100 w-100 d-flex align-items-center item_bg_border">
                  <div class="h-100 item_width" :class="titleBgcList[index]"></div>
                  <div class="h-100 item_width2 d-flex align-items-center pl-2">
                    <div class="font-white-impact font-34 mr-2">{{$formatNumber(item.deviceValue)}}</div>
                    <div class="font-blue font-16 mt-3">kW</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 西区总开 -->
        <div class="h-100 width-33 p10">
          <div class="h-100 item_border p10">
            <div class="item_title">
              <div class="d-flex align-items-center">
                <div class="success_point"></div>
                <div class="font-white font-14">西区总开</div>
              </div>
            </div>
            <div class="d-flex flex-column justify-content-between item_content">
              <div class="height-33 pt-3" v-for="(item,index) in oneCarData3" :key="index">
                <div class="h-100 w-100 d-flex align-items-center item_bg_border">
                  <div class="h-100 item_width" :class="titleBgcList[index]"></div>
                  <div class="h-100 item_width2 d-flex align-items-center pl-2">
                    <div class="font-white-impact font-34 mr-2">{{$formatNumber(item.deviceValue)}}</div>
                    <div class="font-blue font-16 mt-3">kW</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 1号楼4层负载分布 -->
      <div class="h-100 w-3 p10">
        <div class="h-100 w-100 item_border p10">
          <div class="item_title">
            <div class="d-flex align-items-center">
              <div class="success_point"></div>
              <div class="font-white font-14">1号楼4层负载分布</div>
            </div>
          </div>
          <div class="item_content">
            <div class="h-100 w-100" id="pie-first"></div>
          </div>
        </div>
      </div>
      <!-- 1号楼4层负载排名 -->
      <div class="h-100 w-4 p10">
        <div class="h-100 w-100 item_border p10">
          <div class="item_title">
            <div class="d-flex align-items-center">
              <div class="success_point"></div>
              <div class="font-white font-14">1号楼4层负载排名</div>
            </div>
          </div>
          <div class="item_content">
            <div class="h-100 w-100 d-flex flex-column justify-content-between pt-3 pb-3">
              <div class="d-flex align-items-center" v-for="(item,index) in threeCardData" :key="index">
                <div class="width-20 d-flex align-items-center font-white">
                  <div class="border_three p-1 mr-2">#{{index + 1}}</div>
                  <div>{{item.xValue}}</div>
                </div>
                <div class="width-80">
                  <el-progress color="#07C160" :percentage="setItemProgress(item)"
                               :format="format(item)"></el-progress>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="h-4 w-100 d-flex">
      <!-- 1号楼4层房间大功率负载对比 -->
      <div class="h-100 w-8 p10">
        <div class="h-100 w-100 item_border p10">
          <div class="item_title2">
            <div class="d-flex align-items-center">
              <div class="success_point"></div>
              <div class="font-white font-14">1号楼4层房间大功率负载对比</div>
            </div>
          </div>
          <div class="item_content2">
            <div class="h-100 w-100 pt-3" id="bar-first"></div>
          </div>
        </div>
      </div>
      <!--  -->
      <div class="h-100 w-4 d-flex">
        <!-- 公共区域负载 -->
        <div class="h-100 w-50 p10">
          <div class="h-100 w-100 item_border p10">
            <div class="item_title2">
              <div class="d-flex align-items-center">
                <div class="success_point"></div>
                <div class="font-white font-14">公共区域负载</div>
              </div>
            </div>
            <div class="item_content2 d-flex flex-column justify-content-between">
              <div class="height-15" v-for="(item,index) in fiveCardData" :key="index">
                <div class="h-100 w-100 d-flex align-items-center item_bg_border">
                  <div class="h-100 item_width" :class="titleBgcList[index]"></div>
                  <div class="h-100 item_width2 d-flex flex-column justify-content-around pl-2 pt-2 pb-2">
                    <div class="font-white font-12">{{titleList[index]}}</div>
                    <div class="w-100 d-flex justify-content-center">
                      <div class="d-flex align-items-center">
                        <div class="font-white-impact font-32 mr-2">{{$formatNumber(item.deviceValue)}}</div>
                        <div class="font-blue font-16 mt-2">kW</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 宿舍照明负载 -->
        <div class="h-100 w-50 p10">
          <div class="h-100 w-100 item_border p10">
            <div class="item_title2">
              <div class="d-flex align-items-center">
                <div class="success_point"></div>
                <div class="font-white font-14">宿舍照明负载</div>
              </div>
            </div>
            <div class="item_content2 d-flex flex-column justify-content-between">
              <div class="height-12" v-for="(item,index) in sixCardData" :key="index">
                <div class="h-100 w-100 d-flex align-items-center item_bg_border">
                  <div class="h-100 item_width" :class="titleBgcList[index]"></div>
                  <div class="h-100 item_width2 d-flex flex-column justify-content-around pl-2 pt-2 pb-2">
                    <div class="font-white font-12">{{titleList2[index]}}</div>
                    <div class="w-100 d-flex justify-content-center">
                      <div class="d-flex align-items-center">
                        <div class="font-white-impact font-26 mr-2">{{$formatNumber(item.deviceValue)}}</div>
                        <div class="font-blue font-14 mt-2">kW</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import charts from './chart.js'
  import {
    queryOneListLoadByNum,
    queryTwoListLoadByReport,
    queryThreeListLoadByReport,
    queryFourListLoadByReport,
    queryFiveListLoadByNum,
    querySixListLoadByNum
  } from "@/api/dormOneBuildingFourFloor/loadAnalysis"

  export default {
    components: {},
    data() {
      return {
        line_one: require('@/assets/img/line_one.png'),
        line_two: require('@/assets/img/line_two.png'),

        timeout: [],

        oneCarData1: '0',
        oneCarData2: [],
        oneCarData3: [],

        twoCardData: [],

        threeCardData: {},

        titleBgcList: ['item_bg_warning', 'item_bg_success', 'item_bg_danger', 'item_bg_color1', 'item_bg_color2', 'item_bg_success','item_bg_danger'],
        titleList: ['东过道照明1', '东区过道照明2', '西过道照明', '应急灯', '饮水机', '洗衣机'],
        titleList2:  ['1401-1406室', '1407-1413室', '1415室', '1416室', '1417室', '1418室', '宿管间'],

        fourCarData: {
          xData: [],
          seriesData1: [],
          seriesData2: [],
        },
        fiveCardData: [],
        sixCardData: [],
      }
    },
    created() {
    },
    mounted() {
      this.queryOneListLoadByNum()
      this.queryTwoListLoadByReport()
      this.queryThreeListLoadByReport()
      this.queryFourListLoadByReport()
      this.queryFiveListLoadByNum()
      this.querySixListLoadByNum()

      let _this = this;
      this.timeout[0] = setInterval(() => {
        _this.queryOneListLoadByNum()
        _this.queryTwoListLoadByReport()
        _this.queryThreeListLoadByReport()
        _this.queryFourListLoadByReport()
        _this.queryFiveListLoadByNum()
        _this.querySixListLoadByNum()
      }, 30000);

      //
      // this.timeout[1] = setInterval(() => {

      // }, 30000);
    },
    beforeDestroy() {
      if (this.timeout.length > 0) {
        this.timeout.forEach(item => {
          clearInterval(item);
        })
      }
    },
    methods: {
      setItemProgress(data) {
        if (this.$formatNumber(data.yValue)==0) {
          return 0
        } else {
          return this.$formatNumber(data.percent)
        }
      },

      format(percentage) {
        return () => {
          return this.$formatNumber(percentage.yValue) + ' kW'
        }
      },

      queryOneListLoadByNum() {
        queryOneListLoadByNum().then(res => {
          let tempData = res.object
          this.oneCarData1 = tempData[0].deviceList[0].deviceValue
          this.oneCarData2 = tempData[1].deviceList
          this.oneCarData3 = tempData[2].deviceList
        })
      },
      queryTwoListLoadByReport() {
        queryTwoListLoadByReport().then(res => {
          let tempData = res.object || []
          let tempData2 = []
          for (let i = 0; i < tempData.length; i++) {
            tempData2.push({
              value: this.$formatNumber(tempData[i].yValue),
              name: tempData[i].xValue,
            })
          }

          this.twoCardData = tempData2

          charts.pieEchart('pie-first', this.twoCardData)
        })
      },
      queryThreeListLoadByReport() {
        queryThreeListLoadByReport().then(res => {
          let tempData = res.object
          this.threeCardData = tempData
        })
      },
      queryFourListLoadByReport() {
        queryFourListLoadByReport().then(res => {
          let tempData = res.object || []
          let xData = []
          let seriesData1 = []
          let seriesData2 = []
          for (let i = 0; i < tempData.length; i++) {
            xData.push(tempData[i].xValue == '宿管间' ? tempData[i].xValue : tempData[i].xValue + '室')

            let arr = tempData[i].yValue.split(',')
            seriesData1.push(this.$formatNumber(arr[0]))
            seriesData2.push(this.$formatNumber(arr[1]))
          }

          this.fourCarData.xData = xData
          this.fourCarData.seriesData1 = seriesData1
          this.fourCarData.seriesData2 = seriesData2
          charts.barEchart('bar-first', this.fourCarData)
        })
      },
      queryFiveListLoadByNum() {
        queryFiveListLoadByNum().then(res => {
          let tempData = res.object || []
          this.fiveCardData = tempData

          let yjd = tempData[3].deviceValue
          let ysj = tempData[4].deviceValue

          let yjd2 = this.$subtractAndAssign(yjd, ysj)
          this.$set(this.fiveCardData[3], 'deviceValue', yjd2);
        })
      },

      querySixListLoadByNum() {
        querySixListLoadByNum().then(res => {
          let tempData = res.object || []
          this.sixCardData = tempData
        })
      },
    }
  }
</script>
<style lang="scss" scoped>
  .height-33 {
    height: 33.33%;
  }

  .height-20 {
    height: 18%;
  }

  .height-15 {
    height: 15%;
  }

  .height-12 {
    height: 12%;
  }

  .width-33 {
    width: 33.33%;
  }

  .width-80 {
    width: 80%;
  }

  .width-20 {
    width: 20%;
  }

  .item_width {
    width: 8px;
  }

  .item_width2 {
    width: calc(100% - 8px);
  }

  .item_bg_success {
    background-color: #1AA652;
  }

  .item_bg_warning {
    background-color: #FFB822;
  }

  .item_bg_danger {
    background-color: #FF6A93;
  }

  .item_bg_color1 {
    background-color: #87f7c7;
  }

  .item_bg_color2 {
    background-color: #1292b1;
  }

  .item_bg_border {
    background-color: #0A343D;
    border-radius: 4px;
    overflow: hidden;
  }

  ::v-deep .el-progress__text {
    font-family: Source Han Sans CN, Source Han Sans CN-500;
    font-weight: 500;
    color: #ffffff !important;
  }

  .clearLastMb:nth-last-child(1), .clearLastMb:nth-last-child(2) {
    margin-bottom: 0 !important;
  }


  .clearLastMb2:nth-last-child(1), .clearLastMb2:nth-last-child(2), .clearLastMb2:nth-last-child(3), .clearLastMb2:nth-last-child(4), .clearLastMb2:nth-last-child(5) {
    margin-bottom: 0 !important;
  }

  .border_one {
    border: 1px solid rgba(10, 96, 117, 0.62);
    border-radius: 4px;
    box-shadow: 0px 2px 15.5px 0px rgba(102, 237, 246, 0.50) inset;
  }

  .border_two {
    border-radius: 6px;
  }

  .border_three {
    background: rgba(12, 93, 88, 0.87);
    border: 1px solid #07c160;
  }

  .image_size {
    width: calc(100% - 0px);
    height: 48px;
  }

  .font-white {
    font-family: Source Han Sans CN, Source Han Sans CN-500;
    font-weight: 500;
    color: #ffffff;
  }

  .font-blue {
    font-family: Source Han Sans CN, Source Han Sans CN-500;
    font-weight: 500;
    color: #6CA7B4;
  }

  .font-white-impact {
    font-family: Impact, Impact-400;
    font-weight: 400;
    color: #ffffff;
  }
  ::v-deep .el-progress-bar {
    width: 90%;
  }
</style>
